<template>
	<view class="xm20-25">
		
		
		<view class="order xp24-32 xbs ">
			
			<view class="">
				<view class="xflex-x-between">
					<view class="xflex-x">
						<image class="icon" src="/pagesA/static/images/shijian1.png" mode=""></image>
						<view class="stateTitle">
							待评价
						</view>
					</view>
					<view class="code">
						
					</view>
				</view>
				<view class="xmt20">
					<view class="time">
						{{info.data.order_info.time}}<span class="xml32">{{info.data.order_info.night}}晚</span>
					</view>
					
				</view>
				
				<view class="roomBox">
					<view class="room " v-for="(item,index) in info.data.items">
						<view class="xflex-x-between">
							<view class="">
								<view class="xflex-x-between xmb24">
									<view class="roomTitle">
										{{item.house_name}}
									</view>
									
								</view>
								<view class="xflex-x">
									<view class="roomspan" v-for="(itm,indx) in item.labels" :key="indx">
										{{itm}}
									</view>
													
								</view>
							</view>
							
							<view class="">
								<view class="roomdeltal"  @click="topage('/pages/mine/cancel/cancel?id='+item.id)" v-if="item.aftersale_status == 1 || item.aftersale_status == 2">
									售后进度
								</view>
								
								<view class="roomdeltal" @click="cancel(item.id)"  v-if="item.aftersale_status == 0 || item.aftersale_status == 3">
									
									取消订单
								</view>
							</view>
						</view>
					</view>
					
					
					
					
				</view>
				<view class="roomtips">
					酒店要求在12:00后办理入住，请留意行程安排。{{info.data.start}}18:00前可免费取消 >
				</view>
				
				
			</view>
			
			
		</view>
		
		<view class="xp24  xmt32 xbgf">
			<view class="xflex-x">
				<view class="tipsa">
		
				</view>
				<view class="titles">
					盲盒酒店
				</view>
			</view>
			<view class="hote">
				<view class="hote-item xflex-x xpt24 xpb24">
					<view class="hote-imgs pr xmr12">
		
						<image class="hote-img pa " :src="info.data.hotel.image" mode=""></image>
		
		
					</view>
					<view class="xflex1 hote-Boss xai">
		
						<view class="">
							<view class="hote-title">
								{{info.data.hotel.name}}
							</view>
							<view class="xmt12">
								<image v-for="(item,index) in info.data.hotel.star" :key="index" class="xing" src="/static/image/mine/xing.png" mode=""></image>
								<!-- <u-rate :count="4" active-color="#F89D25" v-model="value"></u-rate> -->
							</view>
		
							<view class="xflex-x xmt12">
								<view class="hote-span xmr10">
									{{info.data.hotel.score}}
								</view>
		
		
							</view>
		
						</view>
		
						<view class="xflex-x-between xmt24">
							<view class="xflex-x">
								<image class="hote-address" src="../../..//static/image/mine/address.png" mode="">
								</image>
								<view class="hote-breakfast clamp">
									{{info.data.hotel.distance}}
								</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
	
		
		
		<view class="xp24  xmt32 xbgf">
			<view class="xflex-x xmb40">
				<view class="lab">
					订单编号：
				</view>
				<view class="xflex-x">
					<view class="value">
						{{info.data.sn}}
					</view>
					<view class="copy xml10" @click="copy(info.data.sn)">
						复制
					</view>
				</view>
			</view>
			
			<view class="xflex-x xmb40">
				<view class="lab">
					下单时间：
				</view>
				<view class="xflex-x">
					<view class="value">
						{{info.data.createtime}}
					</view>
					
				</view>
			</view>
			
			<view class="xflex-x xmb40">
				<view class="lab">
					盲盒时间：
				</view>
				<view class="xflex-x">
					<view class="value">
						{{info.data.blind_open_time}}
					</view>
			
				</view>
			</view>
			<view class="xflex-x">
				<view class="lab">
					支付时间：
				</view>
				<view class="xflex-x">
					<view class="value">
						{{info.data.paytime}}
					</view>
			
				</view>
			</view>
			
			
			
		</view>
		
		
		<view class="xp24  xmt32 xbgf">
			<view class="xflex-x-between xmb40">
				<view class="lab">
					订单总额：
				</view>
				<view class="xflex-x">
					<view class="value" style="color: #272727;font-size: 24rpx;">
						{{info.data.order_amount}}
					</view>
					
				</view>
			</view>
			
			<view class="xflex-x-between xmb40">
				<view class="lab">
					骊金豆直减：
				</view>
				<view class="xflex-x">
					<view class="value" style="color: #272727;font-size: 24rpx;">
						-{{info.data.bean_money}}
					</view>
					
				</view>
			</view>
			
			<view class="xflex-x-between xmb40">
				<view class="lab">
					优惠券：
				</view>
				<view class="xflex-x">
					<view class="value" style="color: #272727;font-size: 24rpx;">
						-{{info.data.coupon_money}}
					</view>
					
				</view>
			</view>
			
			<view class="play">
				<view class="playtext">
					实付款：
				</view>
				<view class="playmoney">
					<text>￥</text>{{info.data.total_amount}}
				</view>
			</view>
			
			
			
			
		</view>
		
		<view class="" style="height: 200rpx;">
			
		</view>
		
		<u-popup  :show="cancelinfo.show" :round="20">
			<view class="popcancel pr">
				<view class="popcancel-title">
					取消订单
				</view>
				<image class="popcancel-gb pa" @click="cancelinfo.show  = false" src="/static/image/mine/gb1.png" mode=""></image>
				<view class="popcancel-box">
					<view class="popcancel-content">
						<u-parse :content="cancelinfo.content"></u-parse>
					</view>
					
					<view class="popcancel-tit">
						请选择取消订单的原因（必选）：
					</view>
					
					<scroll-view scroll-y="true" style="height: 550rpx;">
						<view class="xflex-x popcancel-item" @click="cancelinfo.index = index" v-for="(item,index) in cancelinfo.reason" :key="index">
							<image class="popcancel-img" v-if="cancelinfo.index == index" src="/static/image/mine/xz.png" mode=""></image>
							<image class="popcancel-img" v-else src="/static/image/mine/wxz.png" mode=""></image>
							<view class="popcancel-text">
								{{item}}
							</view>
						</view>
					</scroll-view>
				</view>
				
				<view class="popcancel-btn" @click="cancelof">
					提交
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script setup>
	import {hoteldetail,hotelcancel,reason,indexcontent,aftersale } from '../../../../network/home.js'
	import {
		defineProps,
		defineEmits,
		watchEffect,
		ref,
		onMounted,
		onUnmounted,
		reactive
	} from 'vue'
	
	import {
		onReachBottom,
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	
	let info = reactive({
		id:'',
		data:''
	})
	
	let cancelinfo = reactive({
		content:'',
		reason:[],
		index:'0',
		id:'',
		show:false
	})
	reason().then(res=>{
		cancelinfo.reason = res.data.data
	})
	indexcontent({name:'cancel_order_tip'}).then(res=>{
		cancelinfo.content = res.data
	})
	
	const cancel = (id) =>{
		cancelinfo.id = id
		cancelinfo.show = true
	}
	
	onLoad((option) => {
		info.id = option.id
		getinfo()
	})
	
	const topage = (url) =>{
		uni.navigateTo({
			url:url
		})
	}
	
	const getinfo = () => {
		hoteldetail({
			id: info.id,
			action: 'info'
		}).then(res => {
			console.log(res);
			info.data = res.data
		})
	}
	
	const copy = (data) =>{
		uni.setClipboardData({
			data:data,
			success() {
				uni.showToast({
					icon:"none",
					title:'复制成功'
				})
			}
		})
	}
	
	const cancelof = () =>{
		aftersale({
			id:cancelinfo.id,
			reason:cancelinfo.reason[cancelinfo.index]
		}).then(res=>{
			uni.showToast({
				icon:"none",
				title:'取消成功'
			})
			cancelinfo.show = false
			getinfo()
		})
	}
	
	
</script>

<style>
	page{
		background-color: #f5f5f5;
	}
</style>

<style lang="scss" scoped>
	
	.order {
		background-color: #fff;
		border-radius: 20rpx;
	}
	
	.xz {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}
	.top{
		padding-bottom: 27rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.sn {
		font-weight: bold;
		font-size: 30rpx;
		color: #111111;
	}
	.state {
		font-weight: 500;
		font-size: 24rpx;
		color: #198FFF;
	}
	.addicon {
		width: 28rpx;
		height: 28rpx;
		margin-right: 8rpx;
	}
	.jt {
		width: 24rpx;
		height: 24rpx;
		margin-left: 5rpx;
	}
	
	.addname {
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
	}
	
	.addxg {
		font-weight: 500;
		font-size: 24rpx;
		color: #999999;
	}
	
	.time {
		font-weight: 800;
		font-size: 36rpx;
		color: #222222;
		
	}
	
	.info {
		font-weight: bold;
		font-size: 28rpx;
		color: #222222;
		margin-top: 17rpx;
	}
	
	.star {

		// background: #F8F8F8;
		border-radius: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
	}
	.cancel {
		width: 174rpx;
		height: 88rpx;
		border-radius: 44rpx;
		border: 1px solid #CCCCCC;
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		text-align: center;
		line-height: 88rpx;
	}
	
	.publish {
		width: 440rpx;
		height: 88rpx;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
		border-radius: 44rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
	}
	
	.lab {
		font-weight: bold;
		font-size: 24rpx;
		color: #7C7C7C;
		width: 160rpx;
	}
	
	.value {
		font-weight: bold;
		font-size: 24rpx;
		color: #272727;
	}
	.copy {
		font-weight: bold;
		font-size: 22rpx;
		color: #333333;
		width: 70rpx;
		height: 36rpx;
		background: #F2F2F2;
		border-radius: 18rpx;
		text-align: center;
		line-height: 36rpx;
	}
	.jz {
		width: 36rpx;
		height: 36rpx;
	}
	
	.jzw {
		font-weight: bold;
		font-size: 40rpx;
		color: #198FFF;
	}
	.hote {
		
		&-Boss {
			height: 200rpx;
		}
		&-title {
			width: 157rpx;
			height: 31rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			line-height: 38rpx;
		}
		&-img {
			width: 200rpx;
			height: 200rpx;
			background-color: #198EFF;
		}
		
		&-imgs {
			width: 200rpx;
			height: 200rpx;
			border-radius: 12rpx;
			overflow: hidden;
		}
		
		&-time {
			width: 180rpx;
			height: 40rpx;
			background: rgba(0,0,0,0.4);
			border-radius: 10rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			text-align: center;
			bottom: 8rpx;
			left: 10rpx;
		}
		
		&-span {
		
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 18rpx;
			color: #999999;
			background: #EEEEEE;
			border-radius: 6rpx;
			padding: 7rpx 13rpx;
		}
		
		&-breakfast {
			width: 100%;
			text-align: right;
			
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 20rpx;
			color: #999999;
			line-height: 48rpx;
		}
		&-address {
			width: 28rpx;
			height: 28rpx;
		}
		&-ads {
		
			font-weight: 500;
			font-size: 24rpx;
			color: #198FFF;
		}
	}
	
	
	.tipsa {
		width: 6rpx;
		height: 32rpx;
		margin-right: 6rpx;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
	}
	.titles{
		font-weight: bold;
		font-size: 36rpx;
		color: #111111;
	}
	
	.times {
		text-align: center;
		font-weight: 500;
		font-size: 28rpx;
		color: #198FFF;
		
	}
	
	.form{
		&-lab {
			width: 130rpx;
			height: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #222222;
			line-height: 26rpx;
			margin-right: 26rpx;
		}
		
		&-ipt {
			font-weight: 500;
			font-size: 28rpx;
			color: #333;
		}
		&-item {
			padding: 40rpx 0;
			border-bottom: 1rpx solid #EEEEEE;
		}
	}
	
	.qy {
		font-weight: 500;
		font-size: 28rpx;
		color: #7F7F7F;
	}
	
	.xia {
		width: 24rpx;
		height: 24rpx;
	}
	
	.roomBox {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #CCCCCC;
	}
	.room {
		width: 650rpx;
		// height: 116rpx;
		background: #F5F5F5;
		border-radius: 6rpx;
		margin-bottom: 20rpx;
		padding: 20rpx 24rpx;
		box-sizing: border-box;
		&:last-child {
			margin-bottom: 0;
		}
		
		
	}
	.roomTitle {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}
	
	.roomdeltal {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
	}
	.roomspan {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		padding: 0 20rpx;
		
		&::after {
			content: '';
			position: absolute;
			right: 0;
			top: 8rpx;
			display: block;
			width: 1rpx;
			height: 20rpx;
			background-color: #999;
		}
		
		&:first-child {
			padding-left: 0;
			
		}
		
		
		&:last-child {
			border-right: none;
			&::after {
				width: 0;
				display: none;
			}
		}
		
		
	}
	.roomtips {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		margin-top: 27rpx;
		
	}
	
	.yhq {
		width: 690rpx;
		height: 216rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 52rpx 41rpx 54rpx 30rpx;
		box-sizing: border-box;
		&-title {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #222222;
			margin-right: 18rpx ;
		}
		&-vip {
			width: 90rpx;
			height: 28rpx;
			border-radius: 3rpx;
			border: 1px solid #DD5C4A;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 20rpx;
			color: #DD5C4A;
			line-height: 28rpx;
			text-align: center;
		}
		&-icon {
			width: 24rpx;
			height: 24rpx;
			margin-left: 8rpx;
		}
		&-price {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 26rpx;
			color: #F2260C;
		}
	}
	
	.bom {
		align-items: flex-end;
	}
	
	.btn {
		width: 214rpx;
		height: 72rpx;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
		border-radius: 36rpx;
		
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 72rpx;
	}
	.sf {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #333333;
	}
	.price {
		font-family: PingFang SC;
		font-weight: 800;
		font-size: 44rpx;
		color: #F3371E;
		&>text {
			font-size: 32rpx;
		}
	}
	
	.pricehx {
		text-decoration: line-through;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}
	
	.roomBox {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #CCCCCC;
	}
	
	.room {
		width: 650rpx;
		// height: 116rpx;
		background: #F5F5F5;
		border-radius: 6rpx;
		margin-bottom: 20rpx;
		padding: 20rpx 24rpx;
		box-sizing: border-box;
	
		&:last-child {
			margin-bottom: 0;
		}
	
	
	}
	
	.roomTitle {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}
	
	.roomdeltal {
		width: 124rpx;
		height: 40rpx;
		border-radius: 20rpx;
		border: 2px solid #CCCCCC;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 20rpx;
		color: #666666;
		text-align: center;
		line-height: 40rpx
	}
	
	.roomspan {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		padding: 0 20rpx;
		position: relative;
		&::after {
			content: '';
			position: absolute;
			right: 0;
			top: 8rpx;
			display: block;
			width: 1rpx;
			height: 20rpx;
			background-color: #999;
		}
	
		&:first-child {
			padding-left: 0;
			
		}
		
	
		&:last-child {
			border-right: none;
			&::after {
				width: 0;
				display: none;
			}
		}
	
	
	}
	
	.xing {
		width: 28rpx;
		height: 28rpx;
		margin-right: 10rpx;
	}
	
	.roomtips {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		margin-top: 27rpx;
	
	}
	
	
	.icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 7rpx;
	}
	
	.stateTitle {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 44rpx;
		color: #999999;
		
	}
	
	.code{
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #198FFF;
	}
	
	.play {
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
	}
	
	.playtext {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #272727;
	}
	.playmoney{
		&>text {
			font-size: 24rpx;
		}
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 36rpx;
		color: #F0250F;
	}
	
	.popcancel {
		width: 750rpx;
		height: 1300rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		
		&-title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #111111;
			text-align: center;
			margin-top: 40rpx;
		}
		
		&-gb {
			width: 40rpx;
			height: 40rpx;
			top: 20rpx;
			right: 20rpx;
		}
		&-box {
			padding: 49rpx 25rpx 25rpx;
		}
		&-btn {
			width: 630rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #0DBFFB, #198EFF);
			border-radius: 44rpx;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
			margin: auto;
			margin-top: 60rpx;
		}
		&-content {
			width: 700rpx;
			height: 276rpx;
			background: #F8F8F8;
			
		}
		
		&-tit {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #222222;
			margin-top: 86rpx;
		}
		
		
		&-item {
			margin-top: 68rpx;
		}
		
		&-img {
			width: 40rpx;
			height: 40rpx;
			margin-right: 24rpx;
		}
		&-text {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #222222;
		}
	}
	
	

</style>
